<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <keep-alive>
        <component :is="coms[currentIndex]" />
      </keep-alive>
    </transition>

    <!-- 底部导航 -->
    <div class="tabbar">
    <div class="btn" v-for="(item,index) in tablist" :key="index" @click="handleClick(index)" :class="{active:currentIndex == index}">
        <img :src="item.pic" alt="">
        <span>{{item.text}}</span>
    </div>
  </div>
  </div>

  
</template>

<script>
var pic = "https://img1.baidu.com/it/u=3862550611,1395576619&fm=253&fmt=auto&app=138&f=JPEG?w=587&h=500"

import Home from './components/Home.vue';
import Tuan from './components/Tuan.vue';
import Order from './components/Order.vue';
import Mine from './components/Mine.vue';
export default {
  data(){
    return {
      currentIndex:0,
      coms:["Home","Tuan","Order","Mine",],
      tablist:[
                {pic,text:'首页'},
                {pic,text:'爆爆团'},
                {pic,text:'订单'},
                {pic,text:'我的'},
      ]
    }
  },
  methods: {
        handleClick(index){
            this.currentIndex = index;
        }
  },
  components:{
    Home,Tuan,Order,Mine,
  }
}
</script>

<style lang="scss">
*{
  margin:0;
  padding: 0;
}
.tabbar{
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #555;
    background-color: #ffffff;

}
.btn{
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.btn.active{
    color: #3cbdff;
}
.btn img{
    width: 20px;
    height: 20px;
}
.btn span{
    font-size: 12px;
}

/* 入场动画 */
.fade-enter{ /*动画开始时的状态*/
  // opacity: 0;
  /* transform:scale(0); */
  // transform:rotate(0deg);
  transform:scale(0) rotate(0deg);
}
.fade-enter-active{
  transition: all 0.2s;
}
.fade-enter-to{ /*动画结束时的状态*/
  opacity: 1;
  /* transform:scale(1); */
  // transform:rotate(360deg);
  /* transform:scale(1) rotate(360deg); */
}

/* 离场动画 */
.fade-leave{ /*动画开始时的状态*/
  opacity: 1;
  /* transform:scale(1) rotate(360deg); */
  // transform:rotate(360deg);
}
.fade-leave-active{
  transition: all 0.2s;
}
.fade-leave-to{ /*动画结束时的状态*/
  opacity: 0;
  /* transform:scale(0) rotate(0deg); */
  // transform:rotate(0deg);
}
</style>
